<template>
  <v-form>
    <v-select
      label="标签闭合风格"
      :items="options1"
      v-model="config.TagClosingStyle"
    ></v-select>
    <v-select
      label="表单项label尾部冒号"
      :items="options2"
      v-model="config.colonType"
    ></v-select>
    <v-text-field
      label="表单项必填提示信息"
      v-model.trim="config.requirementPromptInfo"
      clearable
    ></v-text-field>
    <v-text-field
      label="表单数据访问对象"
      v-model.trim="config.formAccessor"
      @blur="onBlur"
    ></v-text-field>
    <v-select
      label="视图语法"
      :items="options3"
      v-model="config.viewSyntax"
    ></v-select>
    <v-select
      label="标签名风格"
      :items="options4"
      v-model="config.tagNameStyle"
      :disabled="disabledInJSX"
    ></v-select>
    <v-select
      label="双向绑定语法"
      :items="options5"
      v-model="config.vModelSyntax"
      :disabled="disabledInJSX"
    ></v-select>
    <v-select
      label="引入哪些使用的组件"
      :items="options6"
      v-model="config.importedComponents"
      :disabled="disabledInJSX"
    ></v-select>
  </v-form>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import {
  TagNameStyle,
  VueComponetImport,
  VueVModelSyntax,
  VueViewSyntax,
  ElementCodeGenConfig,
  ColonType,
  TagClosingStyle,
} from "@/types";
import { useConfigs } from "@/features";
import { computed } from "vue";

const { codeGenConfig } = useConfigs();
const config = codeGenConfig as ElementCodeGenConfig;

const disabledInJSX = ref(false);
watch(
  () => config.viewSyntax,
  (val) => {
    if (VueViewSyntax.JSX === val) {
      config.tagNameStyle = TagNameStyle.Camel;
      config.vModelSyntax = VueVModelSyntax.VModel;
      config.importedComponents = VueComponetImport.All;
      disabledInJSX.value = true;
    } else {
      disabledInJSX.value = false;
      config.importedComponents = VueComponetImport.None;
    }
  },
  {
    immediate: true,
  }
);

const options1_1 = [
  {
    title: "<App />",
    value: TagClosingStyle.SingleTag,
  },
  {
    title: "<App></App>",
    value: TagClosingStyle.CoupleTag,
  },
];

const options1_2 = [
  {
    title: "<app />",
    value: TagClosingStyle.SingleTag,
  },
  {
    title: "<app></app>",
    value: TagClosingStyle.CoupleTag,
  },
];

const options1 = computed(() =>
  config.tagNameStyle === TagNameStyle.Camel ? options1_1 : options1_2
);

const options2 = [
  {
    title: "中文",
    value: ColonType.Chinese,
  },
  {
    title: "英文",
    value: ColonType.English,
  },
  {
    title: "无",
    value: ColonType.None,
  },
];

const options3 = [
  {
    title: "template",
    value: VueViewSyntax.Template,
  },
  {
    title: "jsx",
    value: VueViewSyntax.JSX,
  },
];

const options4 = [
  {
    title: "MyApp",
    value: TagNameStyle.Camel,
  },
  {
    title: "my-app",
    value: TagNameStyle.Kebab,
  },
];

const options5 = [
  {
    title: "v-model语法糖",
    value: VueVModelSyntax.VModel,
  },
  {
    title: "sync修饰符",
    value: VueVModelSyntax.Sync,
  },
];

const options6 = [
  {
    title: "全部",
    value: VueComponetImport.All,
  },
  {
    title: "自定义",
    value: VueComponetImport.Custom,
  },
  {
    title: "内置",
    value: VueComponetImport.BuiltIn,
  },
  {
    title: "无",
    value: VueComponetImport.None,
  },
];

function onBlur() {
  if (!config.formAccessor) {
    config.formAccessor = "form";
  }
}
</script>
